<template lang="pug">
    view(class="cu-modal" :class="visible ? 'show' : ''" :style="{'z-index': zIndex}")
        view(class="cu-dialog" :style="{'top': top}")
            view(class="cu-bar bg-white justify-end")
                slot(name="title")
                    view(class="content") {{ title }}
                view(v-if="closeable" class="action" @tap="close") 
                    text(class="cuIcon-close text-red")
            
            view(:class="{ 'padding-xl' : !noPadding}")
                slot
            view(class="cu-bar bg-white justify-end")
                view(class="action")
                    slot(name="action")
                        button(v-if="closeable" class="cu-btn line-green text-green" @tap="close") 取消
                        button(class="cu-btn bg-green margin-left" @tap="$emit('submit')") 确定
</template>

<script>
export default {
  name: "color-modal",

  data() {
    return {};
  },

  props: {
    visible: { type: Boolean, default: false },

    closeable: { type: Boolean, default: true },

    title: { type: String, default: "" },

    type: { type: String, default: "" },

    noPadding: { type: Boolean, default: false },

    zIndex: { type: Number, default: null },

    top: { type: String, default: null }
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
      this.$emit("close");
    }
  }
};
</script>

<style scoped>
.cu-dialog {
  vertical-align: inherit;
}
</style>
